import React, { Component } from 'react'

import { Modal } from 'antd';

const { confirm } = Modal;

interface P {
  data: {
    name: string;
  }
  closable?: boolean;
  onClose?: Function;
}

class Tag extends Component<P> {

  state = {
    visible: true,
  }

  handleClose = v => {
    confirm({
      title: '删除建筑',
      content: `确认是否删除${v.name}?`,
      okText: '继续',
      cancelText: '取消',
      onOk: () => {
        this.setState({ visible: false }, () => {
          this.props.onClose(v)
        })
      },
    })
  }
  
  render() {

    const { data } = this.props;

    return (
      <>
        {
          this.state.visible && <span className="ant-tag" style={{ padding: '3px 4px 3px 6px' }}>
          <span style={{ fontSize: '14px', color: 'rgba(0,0,0,0.75)' }}>{ data.name }</span>
           <i className="anticon anticon-close" onClick={this.handleClose.bind(this, data)}>
             <svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
               <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
             </svg>
           </i>
         </span>
        }
      </>
    )
  }
}

export default Tag;